<template>
  <div class="add">
    <DetailsFrom @addFn="addFn">
      <template>
        <div>
          <el-form ref="addForm" :model="addForm" label-position="top" :rules="addFormRules">
            <el-row>
              <el-col :span="8">
                <el-form-item label="仓库编码" prop="code">
                  <el-input v-model="addForm.code" :disabled="true" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="仓库名称" prop="name">
                  <el-input v-model="addForm.name" placeholder="请输入" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="仓库类型" prop="type">
                  <el-select v-model="addForm.type" placeholder="请选择" clearable>
                    <el-option label="中转仓" value="ZZ" />
                    <el-option label="加工仓" value="JG" />
                    <el-option label="储备仓" value="CB" />
                    <el-option label="冷藏仓" value="LC" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="省/市/区" prop="location">
                  <el-cascader
                    v-model="addForm.location"
                    size="large"
                    :options="options"
                    :props="{ expandTrigger: 'hover' }"
                    clearable
                    @change="handleChange"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="详细地址" prop="address">
                  <el-input v-model="addForm.address" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="仓库状态" prop="status">
                  <el-radio v-model="addForm.status" :label="0">启用</el-radio>
                  <el-radio v-model="addForm.status" :label="1">停用</el-radio>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="仓库面积" prop="surface" min-hehight="10px">
                  <el-input v-model="addForm.surface" placeholder="请输入内容" clearable>
                    <template slot="append">m²</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="负责人" prop="personName">
                  <el-input v-model="addForm.personName" clearable />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="联系电话" prop="phone">
                  <el-input v-model="addForm.phone" clearable />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </template>
    </DetailsFrom>
  </div>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
import { nextFn, addWarehouse, searchWarehouse, editWarehouse } from '@/api'
import DetailsFrom from '@/components/DetailsFrom'
import { messageFn } from '@/utils/myutils'
export default {
  // props: ['type'],
  components: { DetailsFrom },
  data() {
    return {
      options: regionData,
      addForm: {},
      addFormRules: {
        name: [{ required: true, message: '请输入' }],
        type: [{ required: true, message: '请输入' }],
        location: [{ required: true, message: '请输入' }],
        status: [{ required: true, message: '请输入' }],
        personName: [{ required: true, message: '请输入' }],
        phone: [{ pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, trigger: 'blur', message: '请输入正确手机号' }]
      }
    }
  },
  // 组件路由首位 修改meta的名字
  beforeRouteEnter(to, from, next) {
    if (to.params.id === 'null') {
      to.meta.title = '新建仓库'
    } else {
      to.meta.title = '修改仓库'
    }
    next()
  },
  async created() {
    if (this.$route.params.id === 'null') {
      const res = await nextFn('CK')
      this.$set(this.addForm, 'code', res.data.data)
      this.$set(this.addForm, 'status', 0)
      this.$forceUpdate()
    } else {
      const res = await searchWarehouse(this.$route.params.id)
      this.addForm = res.data.data
      this.addForm.location = [this.addForm.province, this.addForm.city, this.addForm.area]
      console.log(this.addForm)
    }
  },
  methods: {
    handleChange(value) {
      const obj = {}
      obj.province = value[0]
      obj.city = value[1]
      obj.area = value[2]
      this.addForm = Object.assign(this.addForm, obj)
    },
    addFn() {
      this.$refs.addForm.validate(async(valid) => {
        if (!valid) return
        this.addForm.location = this.addForm.location.map(item => {
          return CodeToText[item]
        }).join('-')
        let res
        if (this.addForm.id) {
          res = await editWarehouse(this.addForm)
          console.log(1)
        } else {
          res = await addWarehouse(this.addForm)
        }
        messageFn(res.data.isSuccess, this.$route.meta.title)
        this.$router.push({ name: 'warehouse' })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/my-form.scss';
</style>
